import {useXianLuStore, ref, computed, watch, onMounted, onUnmounted} from "#imports"
import {NScrollbar, NCard, NButton, NSpace, NGrid, NGridItem, NIcon, NPopover, NTag, NAlert, NInputNumber, NSelect} from "naive-ui";
import Kuangshi from "./Kuangshi"
import {LazyIcon} from "#components"

export default defineNuxtComponent({
    name: "矿洞",
    setup() {
        const store = useXianLuStore()
        const canMine = computed(() => {
            // 如果木头大于10，允许挖矿
            return store.getMuTouCount >= 10
        })
        
        // 获取store中的状态
        const {dugCaveList, nextDugCaveCoord, renderDistance} = storeToRefs(store)
        
        // 挖矿消息
        const miningMessage = ref('')
        const showMiningMessage = ref(false)
        
        // 渲染距离选项
        const renderDistanceOptions = [
            { label: '1格 (3x3)', value: 1 },
            { label: '2格 (5x5)', value: 2 },
            { label: '3格 (7x7)', value: 3 },
            { label: '4格 (9x9)', value: 4 },
            { label: '5格 (11x11)', value: 5 }
        ]
        
        // 监听渲染距离变化
        watch(renderDistance, (newVal) => {
            store.updateRenderArea()
        })
        
        // 初始化矿洞
        if (dugCaveList.value.length === 0) {
            store.initCave()
        }
        
        // 计算当前坐标
        const currentPosition = computed(() => {
            return `(${nextDugCaveCoord.value.x}, ${nextDugCaveCoord.value.y}, ${nextDugCaveCoord.value.z})`
        })
        
        // 处理挖矿消息事件
        const handleMiningMessage = (event) => {
            miningMessage.value = event.detail.message
            showMiningMessage.value = true
            setTimeout(() => {
                showMiningMessage.value = false
            }, 2000)
        }
        
        // 添加和移除事件监听器
        onMounted(() => {
            document.addEventListener('mining-message', handleMiningMessage)
        })
        
        onUnmounted(() => {
            document.removeEventListener('mining-message', handleMiningMessage)
        })
        
        return () => <div class={"wh-full flex flex-col"}>
            {/* 顶部信息栏 */}
            <div class={"w-full p-8px flex justify-between items-center bg-gray-100"}>
                <div class={"flex gap-8px items-center"}>
                    <span>木头：</span><span>{store.getMuTouCount}</span>
                </div>
                <div class={"flex gap-8px items-center"}>
                    <span>当前坐标：</span><span>{currentPosition.value}</span>
                </div>
                <div class={"flex gap-8px items-center"}>
                    <span>当前深度：</span><span>{nextDugCaveCoord.value.z}层</span>
                </div>
            </div>
            
            {/* 设置区域 */}
            <div class={"w-full p-8px flex justify-between items-center bg-gray-50"}>
                <div class={"flex gap-8px items-center"}>
                    <span>渲染范围：</span>
                    <NSelect 
                        value={renderDistance.value}
                        options={renderDistanceOptions}
                        onUpdateValue={(value) => renderDistance.value = value}
                        style={{ width: '120px' }}
                    />
                </div>
                <NButton 
                    size="small" 
                    onClick={() => store.updateRenderArea()}
                    type="primary"
                >
                    刷新视图
                </NButton>
            </div>
            
            {/* 挖矿消息 */}
            {showMiningMessage.value && (
                <div class={"w-full p-4px"}>
                    <NAlert type="info" closable={false}>
                        {miningMessage.value}
                    </NAlert>
                </div>
            )}
            
            {/* 矿洞显示区域 */}
            <div class={"w-full flex-1 overflow-auto p-16px"}>
                <NScrollbar>
                    <div class={"relative min-h-300px flex flex-wrap justify-center"}>
                        {dugCaveList.value.map((item:any, index:number) => {
                            // 计算相对位置，用于布局
                            const relX = item.coord.x - nextDugCaveCoord.value.x
                            const relY = item.coord.y - nextDugCaveCoord.value.y
                            
                            // 计算网格位置
                            const gridSize = renderDistance.value * 2 + 1
                            const cellSize = 136 // 每个格子的大小 (120px + 16px margin)
                            
                            // 计算位置样式
                            const style = {
                                position: 'absolute',
                                left: `${(relX + renderDistance.value) * cellSize}px`,
                                top: `${(relY + renderDistance.value) * cellSize}px`,
                            }
                            
                            return (
                                <div key={index} style={style}>
                                    <Kuangshi data={item}/>
                                </div>
                            )
                        })}
                    </div>
                </NScrollbar>
            </div>
            
            {/* 底部提示区域 */}
            <div class={"w-full p-8px bg-gray-100"}>
                <NSpace vertical align="center" class={"w-full"}>
                    <div class="text-center text-sm text-gray-600">
                        <p>点击当前位置可向下挖掘</p>
                        <p>点击周围高亮的格子可向该方向挖掘</p>
                    </div>
                </NSpace>
            </div>
        </div>
    }
})